<template>
	<view class="tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<!-- <view class="tn-navbg" :style="{height: vuex_custom_bar_height + 'px'}">
			<tn-nav-bar fixed alpha customBack>
			  <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			  </view>
			</tn-nav-bar>
		</view> -->
		<view class="top-info tn-main-gradient-indigo"></view>
		<view class="about__wrap">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
				<view class="justify-content-item">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left">
						<!-- 图标logo -->
						<view class="logo-pic tn-shadow" >
							<view class="logo-image">
								<view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
								</view>
							</view>
						</view>
						<view class="tn-padding-right tn-color-white">
							<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
							  <text>罗超</text>
							</view>
							<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
								<view class="">
									<tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10px 10rpx 0rpx" class="tn-color-white">标签</tn-tag>
									<tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10px 10rpx 0rpx" class="tn-color-white">标签</tn-tag>
									<tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10px 10rpx 0rpx" class="tn-color-white">标签</tn-tag>
								</view>
								<text class="">项目二部/技术经理</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="about__content">
			<view class="tn-padding-top-xl">
			  <view class="tn-flex tn-flex-row-between tn-flex-col-center bottom-line">
			    <view class="justify-content-item tn-margin tn-text-md">
			      <text class="title-line"></text>
			      <text class="">我的假勤</text>
			    </view>
			    <view class="justify-content-item tn-margin-right tn-padding-xs tn-text-sm tn-radius">
			      <picker @change="bindDateChange" mode="date" :value="curMonth" fields="month">
			        <view class="tn-flex tn-flex-col-center justify-content-item tn-margin-right tn-padding-xs tn-text-sm tn-bg-gray--light tn-color-gray--dark" style="border-radius: 12rpx;">
			          <view class="tn-padding-left-xs tn-padding-right-xs">{{curMonth}}</view>
			          <view class="tn-icon-down tn-padding-right-xs"></view>
			        </view>
			      </picker>
			    </view>
			  </view>
			  <view>
				<tn-grid align="left" col="3">
					<tn-grid-item>
						<view style="padding: 30rpx;" class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<text class="tn-text-bold tn-text-xxl">0</text>
							<text class="">请假小时数</text>
						</view>
					</tn-grid-item>
					<tn-grid-item>
						<view style="padding: 30rpx;" class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<text class="tn-text-bold tn-text-xxl">0</text>
							<text class="">加班小时数</text>
						</view>
					</tn-grid-item>
					<tn-grid-item>
						<view style="padding: 30rpx;" class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<text class="tn-text-bold tn-text-xxl">0</text>
							<text class="">假期余额</text>
						</view>
					</tn-grid-item>
					<tn-grid-item>
						<view style="padding: 30rpx;" class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<text class="tn-text-bold tn-text-xxl">0</text>
							<text class="">考勤异常天数</text>
						</view>
					</tn-grid-item>
					<tn-grid-item>
						<view style="padding: 30rpx;" class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<text class="tn-text-bold tn-text-xxl">0</text>
							<text class="">打卡加班数</text>
						</view>
					</tn-grid-item>
				</tn-grid>
			  </view>
			</view>
			<view class="tn-padding-top-xl">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center bottom-line">
					<view class="justify-content-item tn-margin tn-text-md">
						<text class="title-line"></text>
						<text class="">更多信息</text>
					</view>
				</view>
				<view>
					<tn-list-view class="tn-margin-left-sm tn-margin-right-sm">
						<tn-list-cell>
							<view class="list-icon-text">
								<view class="list__left">
									<view class="list__left__icon tn-icon-my-lack-fill tn-color-gray"></view>
									<view class="list__left__text">在职信息</view>
								</view>
								<view class="list__right">
								  <view class="icon tn-icon-right"></view>
								</view>
							</view>
						</tn-list-cell>
						<tn-list-cell>
							<view class="list-icon-text">
								<view class="list__left">
									<view class="list__left__icon tn-icon-address-fill tn-color-gray"></view>
									<view class="list__left__text">员工档案</view>
								</view>
								<view class="list__right">
								  <view class="icon tn-icon-right"></view>
								</view>
							</view>
						</tn-list-cell>
						<tn-list-cell>
							<view class="list-icon-text">
								<view class="list__left">
									<view class="list__left__icon tn-icon-calendar-fill tn-color-gray"></view>
									<view class="list__left__text">考勤日历</view>
								</view>
								<view class="list__right">
								  <view class="icon tn-icon-right"></view>
								</view>
							</view>
						</tn-list-cell>
						<tn-list-cell>
							<view class="list-icon-text">
								<view class="list__left">
									<view class="list__left__icon tn-icon-money-fill tn-color-gray"></view>
									<view class="list__left__text">工资条</view>
								</view>
								<view class="list__right">
								  <view class="icon tn-icon-right"></view>
								</view>
							</view>
						</tn-list-cell>
					</tn-list-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import header_mixin from '@/mixin/header_mixin.js'
	import tool from '@/utils/tool.js'
	export default {
		name: "workbench",
		mixins: [header_mixin],
		data() {
			return {
				curMonth: tool.getCurDate(new Date(),"month")
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				console.log(this.curMonth)
			},
			bindDateChange: function(e) {
			    this.curMonth = e.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
  .top-info {
	  height: 350rpx;
	  border-bottom-left-radius: 20%;
	  border-bottom-right-radius: 20%;
  }
  .about {
    &__wrap {
      position: relative;
      z-index: 1;
      margin: 20rpx 30rpx;
      margin-top: -200rpx;
    }
	&__content {
		
	}
  }
  .title-line {
	border-left: solid #31C9E8;
	margin-right: 10rpx;
  }
  .bottom-line {
	border-bottom: 1px solid #D6F4FA;
  }
  /* 用户头像 start */
  .logo-image{
    width: 120rpx;
    height: 120rpx;
    position: relative;
    background-color: #FFFFFF;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
    overflow: hidden;
  }
  .list {
    &__left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      
      &__icon, &__image {
        margin-right: 18rpx;
      }
    }
    
    &__right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  
  .list-icon-text, .list-image-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list-image-text {
    .list {
      &__left {
        &__image {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }
</style>